iT邦幫忙

2024 iThome 鐵人賽

DAY 15
1
Modern Web

元素不可思議事件簿系列 第 15

Day 15 - 只要轉圈就高興的向日葵籽

  • 分享至 

  • xImage
  •  

img

圖片來源:梗圖倉庫
字是我上的,哈姆派郎。

本篇續紀錄鼠輩之不可思議事件:wheel

事件其十四:wheel

此事件於鼠輩中央頭頂處之鼠輪滾動時發生,或其他能模擬相似之功能之工具,例如於人指拭於觸控板之行為。

規範原文:
A user agent MUST dispatch this event when a mouse wheel has been rotated around any axis, or when an equivalent input device (such as a mouse-ball, certain tablets or touchpads, etc.) has emulated such an action.

以下示例針對滾輪元素進行wheel事件之觀測,函式之術為鼠輩於鼠之宅中之滾輪滾動鼠輪時,能於滾輪上奔跑嬉戲:

const roller = document.querySelector(".roller");

let angle = 0;

function rotateRoller(event) {
  angle++;
  this.style.transform = `rotate(${angle * 100}deg)`;
}

roller.addEventListener("wheel", rotateRoller);

分段註釋如下:
選取滾輪元素。

const roller = document.querySelector(".roller");

定義函式之術名rotateRoller,內容為轉動滾輪。
定義變數angle初始值為0,當滾輪應轉動時增加轉動角度。

let angle = 0;

function rotateRoller() {
  angle++;
  this.style.transform = `rotate(${angle * 100}deg)`;
}

設定事件觀測器針對滾輪進行wheel事件之觀測,並施以rotateRoller函式之術。

roller.addEventListener("wheel", rotateRoller);

可見鼠輩進入鼠之宅之滾輪後,依照鼠輪滾動之速率奔行之畫面。
img

圖片無法展示鼠輩如雷之奔馳,請參考示例處

wheel事件之預設行為為捲動超過顯示範圍之元素。因此若是在鼠之宅外列出介紹倉鼠之人工智慧拼湊之字符,使其超過當前顯示範圍時,鼠輪滾動時將優先捲動元素,而無法僅滾動鼠之宅之滾輪。

img

因此可將函式之術rotateRoller之內容改造,施以event.preventDefault()術法防止wheel事件之預設行為。

function rotateRoller(event) {
  event.preventDefault();
  angle++;
  this.style.transform = `rotate(${angle * 100}deg)`;
}

當鼠輩於滾輪滾動鼠輪時可於滾輪玩耍,當鼠輩於其他處滾動鼠輪時捲動元素。
img

抑或搭配wheel事件之ctrlKey屬性,當鍵石ctrl受力之同時滾動鼠輪,才可於滾輪中玩耍,否則皆為捲動元素。

function rotateRoller(event) {
  if (event.ctrlKey === true) {
    event.preventDefault();
    angle++;
    this.style.transform = `rotate(${angle * 100}deg)`;
  }
}

img

示例處

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day15

翻譯

鼠輩:滑鼠
中央頭頂處之鼠輪:滾輪
鍵石:鍵

相關連結


上一篇
Day 14 - 一隻鼠吸不夠可以養二隻
下一篇
Day 16 - 轉轉轉好運大家一起來
系列文
元素不可思議事件簿30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
jeremykuo
iT邦新手 5 級 ‧ 2024-09-29 10:58:47

看來是針對鼠輩的監聽呢!

橘子 iT邦新手 4 級 ‧ 2024-09-29 14:08:33 檢舉

15天了,我還在鼠輩_(┐「ε:)_

我要留言

立即登入留言